{% extends 'viewflow/base_page.html' %}
{% load i18n static viewflow %}

{% block title %}{% trans 'Profile' %} - {{ block.super }}{% endblock %}

{% block js %}
  {{ block.super }}
  <script src="{% static 'viewflow/js/smartcrop.js' %}"></script>
{% endblock js %}

{% block page-title %}{% trans 'Profile' %}{% endblock %}

{% block page-menu-app %}
  <vf-page-menu-navigation class="mdc-list">
    <div class="mdc-list-group">
      <a class="mdc-list-item mdc-list-item--with-one-line mdc-list-item--with-leading-icon vf-page__menu-list-item" href="/">
        <span class="mdc-list-item__start"><i class="material-icons">arrow_back</i></span>
        <span class="mdc-list-item__content">{% trans 'View site' %}</span>
      </a>
    </div>
    {% url 'profile' as profile_url %}
    {% if profile_url %}
      <a class="mdc-list-item mdc-list-item--with-one-line mdc-list-item--with-leading-icon vf-page__menu-list-item" href="{{ profile_url }}">
        <span class="mdc-list-item__start"><i class="material-icons">account_box</i></span>
        <span class="mdc-list-item__content">{% trans 'Profile' %}</span>
      </a>
    {% endif %}
  </vf-page-menu-navigation>
{% endblock %}

{% block content %}
  <div class="mdc-layout-grid vf-page__grid">
    <div class="mdc-layout-grid__inner vf-page__grid-inner">
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-10">
        <div class="mdc-card vf-page-profile__detail">
          <section class="vf-page-profile__detail-header">
            {% block form-header-title %}
            <h1 class="mdc-typography--headline6">{{view.request.user.get_username.title }}</h1>
            {% endblock %}
            {% block form-header-subtitle %}{% endblock %}
          </section>
          <section>
            <table class="vf-list__table">
              <tbody>
                {% for field, field_name, value in view.get_object_data %}
                  <tr>
                    <th class="vf-list__table-header vf-list__table-header-text">{{ field_name }}</th>
                    <td>{{ value }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </section>
          <section class="mdc-card__actions vf-page-profile__detail-actions">
            {% url 'password_change' as password_change_url %}
            {% if password_change_url %}
              <a class="mdc-button" href="{{ password_change_url }}">{% trans "Change password" %}</a>
            {% endif %}
            {% url 'profile_edit' as profile_edit_url %}
            {% if profile_edit_url %}
              <a class="mdc-button mdc-button--raised" href="{{ profile_edit_url }}">{% trans "Edit" %}</a>
            {% endif %}
          </section>
        </div>
      </div>
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
        <vf-page-profile-avatar class="mdc-card vf-page-profile__avatar">
          <section class="mdc-card__media vf-page-profile__avatar-media">
            <div>
              <img src="{{ request.user|user_avatar_url }}">
              <div class="vf-page-profile__avatar-shadow"></div>
            </div>
          </section>
          <section class="mdc-card__actions vf-page-profile__avatar-actions">
            <div class="mdc-button mdc-button--raised mdc-card__action vf-page-profile__avatar-change">
              {% trans "Change" %}
              <input type="file">

            </div>
          </section>
          <form method="POST" enctype="multipart/form-data" {% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
            {% csrf_token %}
            <input type="file" name="avatar" style="display:none">
            <button type="submit" style="display:none">{% trans "Submit" %}</button>
          </form>
        </vf-page-profile-avatar>
      </div>
    </div>
  </div>
{% endblock content %}
